<template>
  <el-dialog
    v-if="dialogVisible"
    :title="$t('pinPai')"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :closeOnClickModal="false"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      label-width="140px"
      v-if="dialogVisible"
      :rules="rules"
      v-loading="loadingFrom"
    >
      <el-form-item :label="$t('pinPaiMingCheng')" prop="name">
        <el-input v-model="dataForm.name" :placeholder="$t('qingShuRuPinPaiMingCheng')" />
      </el-form-item>
      <el-form-item :label="$t('halykPinPaiId')" prop="haBrandId">
        <el-input v-model.number="dataForm.haBrandId" type="number" :placeholder="$t('qingShuRuHalykPinPaiId')" />
      </el-form-item>
      <el-form-item :label="$t('halykPinPaiBianMa')" prop="haBrandCode">
        <el-input v-model="dataForm.haBrandCode" :placeholder="$t('qingShuRuHalykPinPaiBianMa')" />
      </el-form-item>

      <!-- <el-form-item :label="$t('shangPinFenLei')" prop="categoryIdData">
        <el-cascader
          ref="cascader"
          v-model="dataForm.categoryIdData"
          :options="adminProductClassify"
          :props="categoryProps"
          style="width: 100%"
        />
      </el-form-item> -->
      <el-form-item :label="$t('pinPaiTuBiaoN', ['(180*180)'])">
        <div class="upLoadPicBox" @click="modalPicTap('1')">
          <div v-if="dataForm.icon" class="pictrue">
            <img :src="dataForm.icon" />
          </div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont" />
          </div>
        </div>
      </el-form-item>
      <el-form-item :label="$t('paiXu')" prop="sort">
        <el-input-number
          v-model="dataForm.sort"
          :min="$constants.NUM_Range.min"
          :max="$constants.NUM_Range.max"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose('dataForm')">{{ $t('cancel') }}</el-button>
      <el-button type="primary" :loading="loading" @click="onsubmit('dataForm')">{{ $t('confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as storeApi from '@/api/store';
import { mapGetters } from 'vuex';
export default {
  name: 'creatClassify',
  computed: {
    ...mapGetters(['adminProductClassify']),
  },
  mounted() {
    this.$store.dispatch('product/getAdminProductClassify');
  },
  data() {
    return {
      categoryProps: {
        value: 'id',
        label: 'translateName',
        children: 'childList',
        expandTrigger: 'hover',
        checkStrictly: false,
        emitPath: false,
        multiple: true,
      },
      dialogVisible: false,
      treeList: [],
      loading: false,
      loadingFrom: false,
      rules: {
        name: [{ required: true, message: this.$t('qingShuRuPinPaiMingCheng'), trigger: 'blur' }],
        categoryIdData: [{ required: true, message: this.$t('qingXuanZeShangPinFenLei'), trigger: 'change' }],
        haBrandId: [{ required: true, message: this.$t('qingShuRuHalykPinPaiId'), trigger: 'blur' }],
        haBrandCode: [{ required: true, message: this.$t('qingShuRuHalykPinPaiBianMa'), trigger: 'blur' }],
      },
      dataForm: {
          sort:1,
          haBrandId:'',
          name:'',
          icon:'',
          haBrandCode:''
        },
    };
  },
  methods: {
    show(row){
      this.dialogVisible = true;
      if(row){
        this.$nextTick(() => {
          Object.assign(this.dataForm,row)
          this.$forceUpdate()
        });
      }
    },
    // 点击商品图
    modalPicTap(tit) {
      const _this = this;
      this.$modalUpload(
        function (img) {
          _this.dataForm.icon = img[0].sattDir;
          console.log(_this.dataForm.icon);
        },
        tit,
        'store',
      );
    },
    handleClose() {
      this.$refs['dataForm'].resetFields();
      this.dialogVisible = false;
    },
    onClose() {
      this.$refs['dataForm'].resetFields();
      this.$nextTick(() => {
        this.dialogVisible = false;
      });
      this.loading = false;
      this.$emit('getList');
      localStorage.removeItem('productBrand');
    },
    onsubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          // this.dataForm.categoryIds = this.dataForm.categoryIdData.toString();
          !this.dataForm.id
            ? storeApi
                .brandAddApi(this.dataForm)
                .then((res) => {
                  this.$message.success(this.$t('caoZuoChengGong'));
                  this.onClose();
                })
                .catch(() => {
                  this.loading = false;
                })
            : storeApi
                .brandUpdateApi(this.dataForm)
                .then((res) => {
                  this.$message.success(this.$t('caoZuoChengGong'));
                  this.onClose();
                })
                .catch(() => {
                  this.loading = false;
                });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.lang {
  width: 100%;
  ::v-deep.el-form-item__content {
    width: 79%;
  }
}
.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
